<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Page</title>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background-color: #f2f2f2;
    }
    
    .container {
      width: 360px;
      padding: 40px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .container h2 {
      margin-bottom: 30px;
      text-align: center;
      font-size: 24px;
      color: #333;
    }
    
    .container input[type="text"], 
    .container input[type="password"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      border: none;
      border-bottom: 1px solid #ccc;
      background-color: transparent;
      font-size: 16px;
      color: #333;
    }
    
    .container input[type="text"]:focus, 
    .container input[type="password"]:focus {
      border-bottom: 1px solid #4CAF50;
      transition: border-bottom 0.3s;
    }
    
    .container button {
      width: 100%;
      padding: 12px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
    }
    
    .container button:hover {
      opacity: 0.9;
    }
    
    .container .error-message {
      margin-top: 10px;
      font-size: 14px;
      color: #f44336;
      text-align: center;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="./js/constant/urls.js"></script>
</head>
<body>
  <div class="container">
    <h2>Login</h2>
    <input type="text" id="username" placeholder="Username">
    <input type="password" id="password" placeholder="Password">
    <button onclick="login()">Login</button>
    <div class="error-message" id="error-message"></div>
  </div>

  <script>


    function login() {
      var username = $("#username").val();
      var password = $("#password").val();

	    // 进行账号和密码的必输校验
  		if (!username || !password) {
    		$("#error-message").text("Username and password are required.");
    		return;
  		}

      var data = JSON.stringify({ "username": username, "password": password });

      $.ajax({
        url: urls.server + '/user/login',
        type: "POST",
        contentType: "application/json",
        data: data,
        success: function(response) {
          if (response.code === 1) {
            // 登录账号   这个不要变key值
            localStorage.setItem("username", response.data.userName);
            // 登录人名字
            localStorage.setItem("name", response.data.name);
			      localStorage.setItem("token", response.data.token);
            window.location.href = "home.html";
          } else {
            $("#error-message").text(response.msg);
          }
        },
        error: function() {
          $("#error-message").text("服务器宕机~~");
        }
      });
    }
  </script>
</body>
</html>